<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String base = request.getContextPath();
    request.setAttribute("base", base);
%>
<!doctype html>
<html lang="zh" class="pu">

<head>
    <!-- meta -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">

    <!-- style -->
    <style>
        .divmob {
            width: 70%;
            margin-left: 15%;
            border:solid 1px #888;
            padding-top: 1%;
            padding-bottom: 1%;
            font-size: 0px;
        }
        .divmob img {
            padding: 0px;
            margin: 0px;
            vertical-align: middle;
        }
        .divmob input {
            padding: 0px;
            margin: 0px;
            vertical-align: middle;
            border: 0px;
            border-radius: 0px;
            color: #BBB;
            background: rgba(0,0,0,0);
        }
        .divvert {
            width: 70%;
            margin-left: 15%;
            border:solid 1px #888;
            margin-top: 8%;
            padding-top: 1%;
            padding-bottom: 1%;
            font-size: 0px;
        }
        .divvert img {
            padding: 0px;
            margin: 0px;
            vertical-align: middle;
        }
        .divvert input {
            padding: 0px;
            margin: 0px;
            vertical-align: middle;
            border: 0px;
            color: #BBB;
            background: rgba(0,0,0,0);
            border-radius:0px;
        }
        .divvert button {
            padding: 0px;
            margin: 0px;
            vertical-align: middle;
            border: 0px;
            border-radius: 0px;
            color: #58807F;
            background: rgba(0,0,0,0);
        }
        .divinfo {
            width: 70%;
            margin-left: 15%;
            color: #F00;
            font-size: 0px;
            padding-top: 2%;
            display: none;
        }
        .divlogin {
            width: 70%;
            margin-left: 15%;
            margin-top: 10%;
            color: #FFF;
            background: #3ABD9E;
            text-align: center;
            padding-top: 3%;
            padding-bottom: 3%;
        }
        .divreturn {
            width: 70%;
            margin-left: 15%;
            margin-top: 3%;
            color: #FFF;
            background: #3ABD9E;
            text-align: center;
            padding-top: 3%;
            padding-bottom: 3%;
        }
    </style>

    <title>${title}</title>
</head>

<body style="padding: 0px;margin: 0px;display: none;">

<!-- 手机 -->
<div id="area_mob" style="width:100%;">
    <!-- 标题 -->
    <div id="div_tlt" style="width: 66%;margin-left: 17%;color: #888;padding-top: 7%;padding-bottom: 7%;text-align:center; ">短信验证码登录</div>

    <!-- 输入 -->
    <div id="div_mob" class="divmob">
        <img id="img_mob" src="${base}/resources/images/icon_mobile.jpg">
        <input id="input_mob" type="text" style="border-left: solid 1px #888;" value="请输入手机号" onfocus="javascript:if(this.value=='请输入手机号')this.value='';" onblur="javascript:if(this.value=='')this.value='请输入手机号';">
    </div>
    <div id="div_vert" class="divvert">
        <img id="img_vert" src="${base}/resources/images/icon_lock.jpg">
        <input id="input_vert" type="text" style="border-left: solid 1px #888;" value="输入验证码" onfocus="javascript:if(this.value=='输入验证码')this.value='';" onblur="javascript:if(this.value=='')this.value='输入验证码';">
        <button id="btn_vert" onclick="getCode('${env}')" style="text-align: right;">获取验证码</button>
    </div>
    <div id="div_info" class="divinfo">验证码输入错误！</div>

    <!-- 操作 -->
    <div id="div_login" onclick="login_mob()" class="divlogin" style="display: none;">立即登录</div>
    <div id="div_loginf" class="divlogin" style="background: #BBB;color:#FFF;">立即登录</div>
    <div id="div_return" onclick="login_return()" class="divreturn">返回</div>
</div>

<!-- js -->
<script src="${base}/resources/js/zepto.min.js"></script>
<script src="${base}/resources/js/cookie_hold.js?443555423"></script>
<script src="${base}/resources/js/waiting.js"></script>
<script src="${base}/resources/js/checkstate.js"></script>
<script src="${base}/resources/js/string_hold.js?345276555"></script>

<!-- javascript -->
<script>
    var operLock = true;

    var mob_uid;
    var mob_token;
    var mob_code = "null";
    var countdown = 60;
    var app_key;

    $(document).ready(function(){
        var etype = '${etype}';
        if (etype == 'iphone') app_key = 'slfdkfdks';
        else app_key = 'kdfjkdfdk';

        //验证码变化
        $('#input_vert').bind('input propertychange', function() {
            //验证码正确性
            var mobcode = $('#input_vert').val();
            if (mob_code == mobcode) {
                $('#div_login').show();
                $('#div_loginf').hide();
            }
            else {
                $('#div_login').hide();
                $('#div_loginf').show();
            }
        });

        //计算显示尺寸
        countRect();
        $(window).resize(function () {
            countRect();
        });
        //显示内容
        $('body').show ();

        operLock = false;
    });
    function countRect () {
        //防止输入时缩放
        if($(':focus').length != 0) return;

        countRect_mob();
    }

    function countRect_mob () {
        var ww,w1;
        ww = parseInt ($(window).width());
        w1 = ww * 0.7;
        //标题
        $('#div_tlt').css('font-size', ww * 0.04);
        //输入-手机号
        $('#div_mob').css('width', w1);
        $('#div_mob').css('border-radius', w1 * 0.02);
        $('#img_mob').css('width', w1 * 0.09);
        $('#img_mob').css('height', w1 * 0.09);
        $('#img_mob').css('margin-left', w1 * 0.04);
        $('#img_mob').css('margin-right', w1 * 0.04);
        $('#img_mob').css('margin-top', w1 * 0.01);
        $('#img_mob').css('margin-bottom', w1 * 0.01);
        $('#input_mob').css('padding-left', w1 * 0.04);
        $('#input_mob').css('font-size', w1 * 0.06);
        $('#input_mob').css('width', w1 * 0.79 - 1);
        //输入-验证码
        $('#div_vert').css('width', w1);
        $('#div_vert').css('border-radius', w1 * 0.02);
        $('#img_vert').css('width', w1 * 0.09);
        $('#img_vert').css('height', w1 * 0.09);
        $('#img_vert').css('margin-left', w1 * 0.04);
        $('#img_vert').css('margin-right', w1 * 0.04);
        $('#img_vert').css('margin-top', w1 * 0.01);
        $('#img_vert').css('margin-bottom', w1 * 0.01);
        $('#input_vert').css('padding-left', w1 * 0.04);
        $('#input_vert').css('font-size', w1 * 0.06);
        $('#input_vert').css('width', w1 * 0.39);
        $('#btn_vert').css('width', w1 * 0.4 - 1);
        $('#btn_vert').css('padding-right', w1 * 0.04);
        $('#btn_vert').css('font-size', w1 * 0.06);
        //提示信息
        $('#div_info').css('font-size', w1 * 0.05);
        //操作
        $('#div_login').css('border-radius', w1 * 0.02);
        $('#div_login').css('font-size', w1 * 0.07);
        $('#div_loginf').css('border-radius', w1 * 0.02);
        $('#div_loginf').css('font-size', w1 * 0.07);
        $('#div_return').css('border-radius', w1 * 0.02);
        $('#div_return').css('font-size', w1 * 0.07);
    }

    function login_return () {
        history.back();
    }

    function getCode () {
        if (operLock) return;

        $('#div_info').hide();

        //确认手机号码
        var mobnum = $('#input_mob').val();
        if (mobnum == null || mobnum == '请输入手机号') {
            showInfo ('input_mob', '请输入手机号', 25);
            return;
        }
        //手机号合法性判断
        var err = checkMobilePhone (mobnum);
        if (err != null && err != '') {
            showInfo ('input_mob', err, 25);
            return;
        }

        login ("http://tomcat.easyifer.com/api/V25", "{'appKey':'" + app_key + "','method':'loginOrRegister','token':'12345678','uid':'0','arguments':{'mobile':'" + mobnum + "'}}");
    }
    function codeTime () {
        if (countdown == 0) {
            $('#input_mob').removeAttr("readonly");
            $('#btn_vert').removeAttr("disabled");
            $('#btn_vert').text("获取验证码");
            $('#input_vert').val("输入验证码");
            countdown = 60;
            mob_code = "timeout";
        }
        else {
            $('#input_mob').attr({"readonly":"readonly"});
            $('#btn_vert').attr({"disabled":"disabled"});
            $('#btn_vert').text(countdown + "秒");
            countdown--;
            setTimeout(function() {
                codeTime()
            },1000);
        }
    }

    function login_mob () {
        if (operLock) return;

        //清空错误信息
        $('#div_info').hide();

        //验证码为空
        if (mob_code == "null") {
            showInfo ('btn_vert', '请先获取验证码', 25);
            return;
        }
        if (mob_code == null) {
            countdown = 0;
            showInfo ('btn_vert', '验证码获取失败，请重新获取', 25);
            return;
        }
        if (mob_code == "timeout") {
            showInfo ('btn_vert', '验证码已失效，请重新获取', 25);
            return;
        }

        //验证码正确性
        var mobcode = $('#input_vert').val();
        if (mob_code != mobcode) {
            $('#input_vert').focus();
            $('#div_info').show();
            return;
        }

        //用户信息判断
        if (mob_uid == null || mob_token == null) {
            alert ("用户信息异常，请联系管理员!");
            return;
        }

        //保存用户信息
        //更新微信公众号openid
        var openid = '${openid}';
        if (openid == null || openid == '') {
            alert ("微信用户信息获取失败，请通过手机号登陆");
            return;
        }
        //开发
        var env = '${env}';
        if (env == "dev") {
            updateWxOpenid ("31235", openid, "mob");
        }
        else {
            updateWxOpenid (mob_uid, openid, "mob");
        }
    }

    function login (url, params) {
        ////创建请求标识信息
        var openid = "${openid}";
        var reqid = '';
        if (openid == null || openid == '') reqid = randomString(28) + "_" + new Date().getTime();
        else reqid = openid + "_" + new Date().getTime();
        //请求
        operLock = true;
        $.waiting.show('请稍候...');
        $.ajax({
            url:"${base}/feiyuws/common.htm?reqid=" + reqid + "&reqname=login_wx&url=" + url + "&params=" + params,
            data: null,
            datatype: "json",
            success:function(data){
                //处理json字符串
                var json = ajaxEchoOper(data.toString());
                //
                var obj = eval("(" + json + ")");
                if (obj["status"] != 0) {
                    operLock = false;
                    $.tips ('验证码获取失败,status:' + obj["status"]);
                }
                else {
                    $.tips("短信已发送，请注意查收");
                    mob_uid = obj["data"]["uid"];
                    mob_token = obj["data"]["token"];
                    mob_code = obj["data"]["code"];
                    codeTime ();
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert('请求失败,XMLHttpRequest-readyState:' + XMLHttpRequest.readyState +
                        ' XMLHttpRequest-status:' + XMLHttpRequest.status +
                        ' textStatus:' + textStatus + ' errorThrown:' + errorThrown);
            },
            complete:function(XMLHttpRequest, textStatus){
                $.waiting.hide();
                operLock = false;
            }
        });
    }

    //提示信息
    function showInfo (foc, msg, top) {
        $.tips (msg, top + "%");
        if (foc != null && foc != '') $('#' + foc).focus();
    }

    function updateWxOpenid (uid, openid, tp) {
        var reqid = openid + "_" + new Date().getTime();
        $.ajax({
            url:"${base}/feiyuws/update_wx_openid.htm?reqid=" + reqid + "&reqname=update_wx_openid&uid=" + uid + "&openid=" + openid + "&tp=" + tp,
            data: null,
            datatype: "json",
            success:function(data){
                setCookie("moblogin", "true");
                history.go(-1);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {operLock = false;
                alert('请求失败,XMLHttpRequest-readyState:' + XMLHttpRequest.readyState +
                        ' XMLHttpRequest-status:' + XMLHttpRequest.status +
                        ' textStatus:' + textStatus + ' errorThrown:' + errorThrown);
            },
            complete:function(XMLHttpRequest, textStatus){
            }
        });
    }
</script>

</body>
</html>